<!--<template>
  <div class="share">
    <h1>分享圈内容</h1>
  </div>
</template>
 -->
 <template>
  <div id="bigmain" >
    <div id="main">
          <!--新加放大  -->
 

      <div>
        <ul
          v-if="share[0]"
          class="list"
        
        >
          <!-- <el-card shadow="hover"> -->
          <li v-for="(i,key) in share" class="list-item"  id='bbb' :key="key">
           




              <div id="xin">
                <div id="youbianpinglun">
                  <div id="touxiang">
                    <img :src="getPic(i.headPic)" />
                  </div>
                  <div id="comment">
                    <h5>{{i.userName}}</h5>
                    <div id="sj" class="sj1">
                      <span id="sj1" class="sj1">{{renderTime(i.upTime)}}</span>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 题目内容 -->

 <router-link :to="'/index/sharedetail/'+  i.upmenuId">
 <!-- <hr /> -->
              <div id="txt">
                <!-- <a href="xiangqing.html"> -->
                 
                 <div class="yezi"> 
                   <p>{{i.upmenuTitle}}</p>
                 </div>
                <!-- </a> -->
                <span class="intro">{{i.story}}</span>
              </div>
     </router-link>
              <!-- 新放大内容 -->
          <!-- <div class="demo-image__preview">
      <el-image 
      style="width: 100px; height: 100px"
     :src="url[key]" 
     :preview-src-list="srcList[key]"
     v-model="message"
     @click="fangda(key)">
     </el-image>
    </div> -->


              <div id="tupian" class="demo-image__preview tupian">
                 <el-image 
      style="width: 80%; height: 500px"
     :src="url[key]" 
     :preview-src-list="srcList"
     v-model="message"
     @click="fangda(key)">
     </el-image>
                <!-- <img :src="getPic(share[key].finishPic)" /> -->
                 
                 <!-- <div class="mask">
                  <span>查&nbsp;&nbsp;看&nbsp;&nbsp;详&nbsp;&nbsp;情</span>
                 
                
                </div>  -->
                
              </div>
       

            <div id="txt">
              <!-- <hr /> -->

              <div id="foot" class="foot1">
                <span id="youxiajiao">
                  <i
                    v-bind:class="{color:iscolor[key].v}"
                    class="fa fa-thumbs-o-up"
                    aria-hidden="true"
                    id="like"
                    @click="addlikeNum(key)"
                  >
                    <span id="likeNum" class="likeNum1">{{share[key].likeNum}}</span>
                  </i>

                  <i
                    v-bind:class="{color:iscolor1[key].v}"
                    class="fa fa-star-o"
                    aria-hidden="true"
                    id="coll"
                    @click="shoucang(key)"
                  ></i>
                  <!-- <span id='yishoucang'>(已收藏)</span> -->
                  <i
                    class="fa fa-commenting-o fa-1.5x"
                    aria-hidden="true"
                    id="com"
                    @click="comment(key)"
                  ></i>
                </span>
              </div>
            </div>
            <comment :sharecom="sharecom[key]" :upmenuId="upmenuId" v-show="isShow[key].v"></comment>
          </li>
          <!-- </el-card> -->
        </ul>
        <!-- <p v-if="loading">加载中...</p>
        <p v-if="noMore">没有更多了</p> -->
      </div>
    </div>
    

  </div>
</template>
<script>

import jwt_decode from "jwt-decode";
import Comment from "../components/sharecomment.vue";
export default {
  data() {
    return {
      url:[],
      srcList: [],
      // testname:'test',
      changeColor: false,
      // share: [],
      share: [],
      src: "",
      sharecom: [],
      isShow: [],
      detail:[],
      isshow: false,
      count: 1,
      loading: false,
      collectcolor: "black",
      iscolor: [],
      iscolor1: [],
      iscolor2: [],
      upmenuId: "",
      message: "hellololololo"
    };
  },
  components: {
    Comment
  },

  computed: {
    noMore() {
      return this.count >= this.share.length;
    },
    disabled() {
      return this.loading || this.noMore;
    }
  },

  created() {
    // var upmenuId=this.share
    this.$axios
      .get("http://localhost:3000/share/shareContent")
      .then(res => {
        // var upmenuId = this.share[key].upmenuId;
        console.log("查询结果大share：", res.data.data);
        this.share = res.data.data;
        // console.log("滚动条用的share长度", this.share.length);
        // this.headpic=this.share[key].headPic
        console.log(this.share);
        

        for (let i = 0; i < this.share.length; i++) {
          // console.log(this.share.length)
          // console.log('我看看',this.share[i].upmenuId)
          this.url.push(require("../../../../Eatproj/EAT/public/upload/" + this.share[i].finishPic)) 
          var upmenuId = this.share[i].upmenuId;
          console.log(upmenuId);
          this.isShow.push({ v: false });
          this.iscolor.push({ v: false });
          this.iscolor1.push({ v: false });
          // var _this = this;
          this.$axios
            .get("http://localhost:3000/chat/comment/" + 2 + "/" + upmenuId)
            .then(res => {
              
              console.log("查询结果", res.data.data);
              // console.log(this._props.commentType)
              // console.log(this._props.type[0])
              this.sharecom[i] = res.data.data;
              console.log("sharecom的数组", this.sharecom);
            })
            .catch(err => {
              console.log("错误信息：", err);
            });
            this.$axios
        .post("http://localhost:3000/share/selsharelike", { upmenuId: upmenuId }) //传用户upmenuId
        .then(res => {
          if (res.data.data == 0){
            this.iscolor[i].v =true ;
          }
        })
        .catch(err => {
              console.log("错误信息：", err);
            });
    this.$axios
      .get("http://localhost:3000/chat/selcollect/"+
        upmenuId+"/"+2)
      .then(res => {
        if (res.data.data == 0) {
          this.iscolor1[i].v = true;
        }
      })
      .catch(err => {
        console.log("错误信息：", err);
      });
        
        }
        // console.log(this,)
      })

      .catch(err => {
        console.log("错误信息：", err);
      });
//打开页面时显示点赞
      
  },
  methods: {
    fangda(key){

         this.$axios.get("http://localhost:3000/share/publishdetail/"+this.share[key].upmenuId)
        .then(res => { 
       this.srcList=[];
          this.detail = res.data.data;
       
        console.log('当前upmenuId',this.share[key].upmenuId)
        console.log("查询结果详情：", res.data);
       
        console.log('detail数组',this.detail)
        for(let i = 0 ; i< this.detail.length; i++){
           this.srcList.push(require("../../../../Eatproj/EAT/public/upload/" + this.detail[i].stepPic)) 
           console.log(this.detail[i].stepPic)
           
        }   
        
       console.log('src',this.srcList)
        
      })
      .catch(err => {
        console.log("错误信息：", err);
      });
    },
    //获取图片
    getPic(pic) {
      if (pic == "userimg.jpg") {
        return require("../assets/images/" + pic);
      } else {
        return require("../../../../Eatproj/EAT/public/upload/" + pic);
      }
    },

    load() {
      this.loading = true;
      setTimeout(() => {
        this.count += 2;
        this.loading = false;
      }, 2000);
    },
    //时间转码
    renderTime(date) {
      var dateee = new Date(date).toJSON();
      return new Date(+new Date(dateee) + 8 * 3600 * 1000)
        .toISOString()
        .replace(/T/g, " ")
        .replace(/\.[\d]{3}Z/, "");
    },
    //点赞数
    addlikeNum(key) {
      var upmenuId = this.share[key].upmenuId;
      console.log(this.share[key].upmenuId);
      this.$axios
        .post("http://localhost:3000/share/addlike", { upmenuId: upmenuId }) //传用户upmenuId
        .then(res => {
          // console.log("查询结果", res);
          if (res.data.msg == "点赞成功") {
            this.share[key].likeNum++,
              (this.iscolor[key].v = !this.iscolor[key].v);
            // changeColor()
            // {
            //   this.style.color='red'
            // }
            console.log("点赞成功", res);
            alert("点赞成功");
            // this.color='orangered'
            // let dianzan = document.getElementsByClassName('fa fa-thumbs-o-up')
            // dianzan.color='orangered'
          } else if (res.data.msg == "该用户已经点过赞") {
            if(confirm("您已经点过赞，是否取消点赞")){
                this.$axios
              .post("http://localhost:3000/share/dellike", {
                upmenuId: upmenuId
              }) //传用户upmenuId
              .then(res => {
                console.log("取消点赞", res);
                this.share[key].likeNum--;
                this.iscolor[key].v = false;
                //  this.ref.color=this.color
              })
              .catch(err => {
                console.log("错误信息", err);
              });
            }
          
          }
          //  console.log(upmenuId)
          //  console.log(mytoken)
        })
        .catch(err => {
          console.log("错误信息", err);
        });
    },
    comment(key) {
      // this.isshow=true

      this.isShow[key].v = !this.isShow[key].v;
      console.log(this.share[key].upmenuId);
      this.upmenuId = this.share[key].upmenuId;
      console.log("show", this.isShow[key]);
      console.log(this.isShow);
    },
    shoucang(key) {
      // this.isshow=!isshow
      // this.iscolor1[key].v=!this.iscolor1[key].v
      var upmenuId = this.share[key].upmenuId;
      console.log(this.share[key].upmenuId);
      this.$axios
        .post("http://localhost:3000/chat/addcollect", {
          collectType: upmenuId,
          typeId: 2
        })
        .then(res => {
          if (res.data.data == 1) {
            this.iscolor1[key].v = !this.iscolor1[key].v;

            alert("收藏成功");
          }
          if (res.data.data == 0) {
            if (confirm("您已经收藏过，确定取消点收藏吗？")) {
              //  console.log('取消收藏成功',res.data);

              //  this.collectcolor = "black";
              this.$axios
                .post("http://localhost:3000/chat/delcollect", {
                  collectType: upmenuId,
                  typeId: 2
                })
                .then(res => {
                  if (res.data.data == 1) {
                    this.iscolor1[key].v = false;
                    alert("取消收藏成功");
                  } else {
                    console.log("取消收藏失败！", res.data);
                    alert("取消收藏失败！");
                    this.iscolor1[key].v = true;
                  }
                })
                .catch(err => {
                  console.log("错误信息:", err);
                });
            }
          }
        })
        .catch(err => {
          console.log("错误信息", err);
        });
    }
  }
};
</script>
<style>
/* body{
  overflow-y: hidden;
} */
</style>
<style lang="css" scoped>
.yezi {
  height: 40px;
  background: url(../assets/images/base1.png) no-repeat center;
  margin: 30px 0;
}
.demo-image__preview{
       float: left;
}

html {
  overflow-y: hidden;
}
#sj1 {
  font-size: 18px;
}
/* 上面加的新头像用户名 */
#xin {
  width: 100%;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 3px;
  border-radius: 10px;
  margin-left: 3;
  margin-left: 18px;
  margin-top: 5px;
}
#youbianpinglun {
  position: relative;
  padding: 1px 5px 10px 50px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
#touxiang {
  width: 600px;
  height: 60px;
  position: absolute;
  left: 20px;
}
#touxiang img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
#comment {
  margin-left: 50px;
}
#comment h5 {
  font-size: 18px;
  position: relative;
  top: 10px;
  font-weight: bold;
  padding-bottom: 10px;
  top: 5;
}
.color {
  color: orangered;
}
.color1 {
  color: orangered;
}
.color2 {
  color: black;
}
* {
  margin: 0;
  padding: 0;
}
#tupian:hover .mask {
  display: block;
}
#tupian img:hover .mask {
  display: block;
}
.mask {
  display: none;
  width: 80%;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  left: 50%;
  /* top: 0; */
  margin-left: -40%;
  border-radius: 30px;
  text-align: center;
  /* height: 200px; */
  height: 500px;
}
.mask span {
  width: 100%;
  height: 200px;
  line-height: 250px;
  color: green;
  font-weight: bold;
  font-size: 18px;
  text-decoration: underline;
}
a {
  text-decoration: none;
  color: black;
}

li {
  list-style: none;
}
/* 字体 */
body {
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* 最大DIV */
#big {
  width: 100%;
  min-width: 1200px;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}
#head {
  width: 80%;
  height: 80px;
  background-color: white;
  margin: 0 auto;
}
/* 中间格式 */
#main {
  width: 80%;
  margin: 0 auto;
  border-radius: 25px;
  float: left;
  justify-content: center;
}
#bigmain {
  /* height: -webkit-fill-available; */
  width: 100%;
  min-width: 1200px;
  display: flex;
  margin-bottom: 20px;
}
/* 一个li的格式 */
.list {
  border-radius: 30px;
  width: 100%;
  float: left;
}
.list > li {
  border:1px solid #eee;
  float: left;
  margin-top: 40px;
  width: 100%;
  height: 30%;
}
#bbb:hover {
box-shadow:-3px 5px 5px 5px #eee;
}
/* .list > li:hover .list li{
box-shadow: 4px 4px 10px #ff0000;

} */
#tupian {
  margin-top: 10px;
  /* height: 500px; */
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  float: left;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}
/* 图片介绍 */
#tupian > img {
  height: 500px;
  width: 100%;
  border-radius: 30px;
  margin: 0 auto;
}
.el-image{
/* height: 500px; */
    height: 400px !important;
    width: 60% !important;
    margin: 0 auto;
}
/*  右边的DIV */
#txt {
  border-top:1px solid #eee;
  width: 80%;
  margin: 0 auto;
}
/* 右边题目 */
#txt p {
  letter-spacing: 15px;
    /* font-style: oblique; */
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
}
/* 右边内容介绍 */
#txt > span {
  display: inline-block;
  width: 100%;
  font-size: 18px;
  margin-left: 30px;
  margin-top: 10px;
  color: gray;
}
/* 下边DIV */
#foot {
  margin: 20px 0;
  height: 20px;
  width: 100%;
  float: left;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  font-size: 16px;
}
/* 作者的span */
#zuozhe {
  display: inline-block;
  width: 200px;
  height: 20px;
}
/* 时间的span */
#cont {
  width: 200px;
  height: 20px;
  font-size: 16px;
}
/* 收藏点赞评论右下span*/
#youxiajiao {
  font-size: x-large;
  width: 100%;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: start;
  height: 20px;
  margin-right: 15px;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
/* 隐藏点赞变色 */
#bianse {
  display: none;
}
/* 点赞计数 */
#jishu {
  float: left;
}

/* 收藏点赞图标 */
#foot i {
  height: 20px;
  width: 60px;
  cursor: pointer;
  float: left;
  margin-left: 20px;
}
/* 隐藏收藏变色 */
#dianshoucang {
  display: none;
}
/* 隐藏已收藏 */
#yishoucang {
  font-size: 10px;
  display: none;
  float: left;
}
/* 隐藏点评论图标 */
#dianpinglun {
  display: none;
}
</style>